<%--
  Created by IntelliJ IDEA.
  User: eternal
  Date: 2024/11/13
  Time: 19:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
<link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
<link rel="stylesheet" href="../css/new_file.css" id="theme-stylesheet">
</head>
<body>
<div class="page login-page">
  <div class="container d-flex align-items-center">
    <div class="form-holder has-shadow">
      <div class="row">
        <!-- Logo & Information Panel-->
        <div class="col-lg-6">
          <div class="info d-flex align-items-center">
            <div class="content">
              <div class="logo">
                <h1>欢迎注册</h1>
              </div>
              <p>美容院管理系统</p>
            </div>
          </div>
        </div>
        <!-- Form Panel    -->
        <div class="col-lg-6 bg-white">
          <div class="form d-flex align-items-center">
            <div class="content">
              <div class="form-group">
                <input id="register-username" class="input-material" type="text" name="registerUsername" placeholder="请输入用户名/姓名" >
                <div class="invalid-feedback">
                  用户名必须在2~10位之间
                </div>
              </div>
              <div class="form-group">
                <input id="register-password" class="input-material" type="password" name="registerPassword" placeholder="请输入密码"   >
                <div class="invalid-feedback">
                  密码必须在6~10位之间
                </div>
              </div>
              <div class="form-group">
                <input id="register-passwords" class="input-material" type="password" name="registerPasswords" placeholder="确认密码"   >
                <div class="invalid-feedback">
                  两次密码必须相同 且在6~10位之间
                </div>
              </div>
              <div class="form-group">
                <button id="regbtn" type="button" name="registerSubmit" class="btn btn-primary">注册</button>
              </div>
              <small>已有账号?</small><a href="../login.jsp" class="signup">&nbsp;登录</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- JavaScript files-->
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/jquery/bootstrap-4.2.1.js"></script>
<script>
  $(function(){
    /*错误class  form-control is-invalid
    正确class  form-control is-valid*/
    var flagName=false;
    var flagPas=false;
    var flagPass=false;
    /*验证用户名*/
    var name,passWord,passWords;
    $("#register-username").change(function(){
      name=$("#register-username").val();
      if(name.length<2||name.length>10){
        $("#register-username").removeClass("form-control is-valid")
        $("#register-username").addClass("form-control is-invalid");
        flagName=false;
      }else{
        $("#register-username").removeClass("form-control is-invalid")
        $("#register-username").addClass("form-control is-valid");
        flagName=true;
      }
    })
    /*验证密码*/
    $("#register-password").change(function(){
      passWord=$("#register-password").val();
      if(passWord.length<6||passWord.length>18){
        $("#register-password").removeClass("form-control is-valid")
        $("#register-password").addClass("form-control is-invalid");
        flagPas=false;
      }else{
        $("#register-password").removeClass("form-control is-invalid")
        $("#register-password").addClass("form-control is-valid");
        flagPas=true;
      }
    })
    /*验证确认密码*/
    $("#register-passwords").change(function(){
      passWords=$("#register-passwords").val();
      if((passWord!=passWords)||(passWords.length<6||passWords.length>18)){
        $("#register-passwords").removeClass("form-control is-valid")
        $("#register-passwords").addClass("form-control is-invalid");
        flagPass=false;
      }else{
        $("#register-passwords").removeClass("form-control is-invalid")
        $("#register-passwords").addClass("form-control is-valid");
        flagPass=true;
      }
    })


    $("#regbtn").click(function(){
      if(flagName&&flagPas&&flagPass){
        localStorage.setItem("name",name);
        localStorage.setItem("passWord",passWord);
        location="login.html"
      }else{
        if(!flagName){
          $("#register-username").addClass("form-control is-invalid");
        }
        if(!flagPas){
          $("#register-password").addClass("form-control is-invalid");
        }
        if(!flagPass){
          $("#register-passwords").addClass("form-control is-invalid");
        }
      }
    })
  })
</script>
</body>
</html>